<script setup lang="ts">
import AuthBar from '@/components/authBar/index.vue';
import { useLoginHelper } from '@/hooks/useLoginHelper';
import { buildAssetSource } from '@/utils';

const { redirectLogin } = useLoginHelper();

function handleLogin(type: 'card' | 'code') {
  const url = type === 'card'
    ? '/pages/login/medicalInsurance/medicalCardLogin'
    : '/pages/login/medicalInsurance/medicalCodeLogin';
  redirectLogin(url);
}
</script>

<template>
  <view class="medical-login flex-col">
    <AuthBar back-home />
    <view class="flex-1 overflow-auto">
      <view class="medical-login__title mt-110">
        请选择医保登录类型
      </view>
      <view class="medical-login__desc mt-14">
        您可选择医保卡或者电子凭证登录
      </view>

      <view class="mt-48 px-162">
        <view class="medical-login__content pb-55 pt-48" @click="handleLogin('card')">
          <view class="flex-center">
            <image :src="buildAssetSource('medical-card.png')" class="h-376 w-547" />
          </view>
          <view class="idcard-content__title text-center">
            医保卡
          </view>
        </view>

        <view class="medical-login__content mt-33 pb-55 pt-48" @click="handleLogin('code')">
          <view class="flex-center">
            <image :src="buildAssetSource('medical-code.png')" class="h-376 w-547" />
          </view>
          <view class="idcard-content__title text-center">
            电子凭证
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<route type="page" lang="json5">
{
  layout: 'default',
  style: {
    navigationBarTitleText: '用户登录',
    navigationStyle: 'custom'
  }
}
</route>

<style lang="scss" scoped>
.medical-login {
  background-color: var(--bg-color);
  height: 100%;

  .medical-login__cover {
    @apply flex-center;
    background: #e5efff;
    width: 202px;
    height: 202px;
    border-radius: 50%;
  }

  .medical-login__title {
    color: var(--text-color);
    font-weight: bold;

    font-size: 60px;
    text-align: center;
  }

  .medical-login__desc {
    font-size: 28px;
    color: var(--secondary-text-color);
    text-align: center;
  }

  .medical-login__content {
    background: #fff;
    border-radius: 20px;

    .idcard-content__title {
      font-size: 36px;
      font-weight: 500;

      color: var(--text-color);
    }

    .idcard-content__desc {
      background: #e5efff;
      border-radius: 10px;
      color: var(--secondary-text-color);
      display: inline-block;
      padding: 24px 36px;
      font-size: 28px;
      margin: 45px auto;
    }

    .progress {
      --wot-progress-height: 30px;
      --wot-progress-bg: #c0dcff;
      --wot-progress-color: var(--primary);
    }

    .progress-text {
      font-size: 28px;
      color: var(--secondary-text-color);
      text-align: center;
    }

    .complete-icon {
      width: 160px;
      height: 160px;
      border-radius: 50%;
      background: #e5efff;
      margin: 0 auto;
    }

    .complete-info {
      text-align: center;
      font-size: 48px;
      font-weight: bold;
      color: var(--text-color);
    }
  }

  .action-btn {
    --wot-button-medium-height: 124px;
    --wot-button-medium-fs: 42px;

    :deep(.wd-button) {
      font-weight: bold;
    }
  }
}
</style>
